<template>
	<view class="goods-page">
		<!-- 分类Tab -->
		<up-tabs :list="categories" @change="handleCategoryChange" lineColor="#ED8936"></up-tabs>

		<!-- 商品列表 -->
		<scroll-view scroll-y class="scroll-container" :refresher-enabled="true" :refresher-triggered="refreshing"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore">
			
			<!-- 骨架屏 -->
			<view class="skeleton-container" v-if="loading && goods.length === 0">
				<view class="skeleton-card" v-for="i in 4" :key="i">
					<view class="skeleton-image skeleton-animate"></view>
					<view class="skeleton-title skeleton-animate"></view>
					<view class="skeleton-price skeleton-animate"></view>
				</view>
			</view>

			<!-- 商品网格 -->
			<view class="goods-grid" v-else-if="goods.length > 0">
				<view 
					class="goods-card" 
					v-for="item in goods" 
					:key="item.id"
					@click="handleGoodsClick(item.id)"
				>
					<image :src="item.image" mode="aspectFill" class="goods-image"></image>
					<view class="goods-info">
						<text class="goods-title">{{ item.title }}</text>
						<view class="price-row">
							<text class="price">¥{{ item.price }}</text>
							<text class="original-price" v-if="item.originalPrice">¥{{ item.originalPrice }}</text>
						</view>
						<view class="tag-row">
							<up-tag 
								:text="`${item.discount}折`" 
								type="error" 
								plain 
								size="mini"
								v-if="item.discount"
							></up-tag>
							<up-tag text="热销" type="warning" plain size="mini" v-if="item.isHot"></up-tag>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-else>
				<up-icon name="shopping-cart" size="80" color="#cccccc"></up-icon>
				<text class="empty-text">暂无好价商品</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 分类
const categories = ref([
	{ name: '全部' },
	{ name: '电子产品' },
	{ name: '日用品' },
	{ name: '图书' }
]);

// 当前分类
const currentCategory = ref(0);

// 商品列表
const goods = ref([
	{
		id: 1,
		title: 'AirPods Pro 2代 降噪耳机',
		image: 'https://picsum.photos/300/300?random=1',
		price: 1299,
		originalPrice: 1899,
		discount: 6.8,
		isHot: true
	},
	{
		id: 2,
		title: 'iPad Air 5 256G WIFI版',
		image: 'https://picsum.photos/300/300?random=2',
		price: 4299,
		originalPrice: 5199,
		discount: 8.3,
		isHot: true
	},
	{
		id: 3,
		title: '索尼WH-1000XM5 降噪耳机',
		image: 'https://picsum.photos/300/300?random=3',
		price: 1999,
		originalPrice: 2399,
		discount: 8.3,
		isHot: false
	},
	{
		id: 4,
		title: 'Kindle Paperwhite 电子书阅读器',
		image: 'https://picsum.photos/300/300?random=4',
		price: 799,
		originalPrice: 999,
		discount: 8.0,
		isHot: false
	},
	{
		id: 5,
		title: 'MacBook Air M2 256G',
		image: 'https://picsum.photos/300/300?random=5',
		price: 7999,
		originalPrice: 9499,
		discount: 8.4,
		isHot: true
	},
	{
		id: 6,
		title: '小米手环8 Pro 智能手环',
		image: 'https://picsum.photos/300/300?random=6',
		price: 299,
		originalPrice: 399,
		discount: 7.5,
		isHot: false
	}
]);

// 加载状态
const loading = ref(false);
const refreshing = ref(false);

// 分类切换
const handleCategoryChange = (index) => {
	currentCategory.value = index;
};

// 下拉刷新
const onRefresh = () => {
	refreshing.value = true;
	setTimeout(() => {
		refreshing.value = false;
	}, 1000);
};

const onRestore = () => {
	refreshing.value = false;
};

// 商品详情
const handleGoodsClick = (id) => {
	uni.navigateTo({
		url: `/pages/goods/goodsDetail?id=${id}`
	});
};
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';
@import '../../styles/mixins.scss';

.goods-page {
	min-height: 100vh;
	background: $bg-page;

	.scroll-container {
		height: calc(100vh - 90rpx);
		padding: $spacing-base;
	}

	// 骨架屏
	.skeleton-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: $spacing-base;

		.skeleton-card {
			background: $bg-card;
			border-radius: $radius-md;
			overflow: hidden;

			.skeleton-image {
				height: 300rpx;
				background: $border-light;
			}

			.skeleton-title,
			.skeleton-price {
				height: 28rpx;
				background: $border-light;
				margin: $spacing-base;
				border-radius: $radius-sm;
			}

			.skeleton-animate {
				@include skeleton-animation;
			}
		}
	}

	// 商品网格
	.goods-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: $spacing-base;

		.goods-card {
			background: $bg-card;
			border-radius: $radius-md;
			overflow: hidden;
			box-shadow: $shadow-sm;
			transition: all $transition-base;

			&:active {
				transform: translateY(-4rpx);
				box-shadow: $shadow-base;
			}

			.goods-image {
				width: 100%;
				height: 300rpx;
			}

			.goods-info {
				padding: $spacing-base;

				.goods-title {
					display: block;
					font-size: $font-base;
					font-weight: $font-medium;
					color: $text-primary;
					@include ellipsis(2);
					margin-bottom: $spacing-sm;
					min-height: 80rpx;
				}

				.price-row {
					display: flex;
					align-items: baseline;
					gap: $spacing-xs;
					margin-bottom: $spacing-sm;

					.price {
						font-size: $font-xl;
						font-weight: $font-bold;
						color: $error-color;
					}

					.original-price {
						font-size: $font-xs;
						color: $text-tertiary;
						text-decoration: line-through;
					}
				}

				.tag-row {
					display: flex;
					gap: $spacing-xs;
				}
			}
		}
	}

	// 空状态
	.empty-state {
		@include flex-center;
		flex-direction: column;
		padding: 200rpx 0;
		gap: $spacing-md;

		.empty-text {
			font-size: $font-base;
			color: $text-tertiary;
		}
	}
}
</style>

